<template>
	<div id="container">
		<div id="search_content">
			<el-form label-width="100px"
			         size="large"
					 style="max-width: 400x">
				    <el-row :gutter="40">
				    	<el-col :span="7">
				    		<el-form-item label="部门编号:">
				    			<el-input placeholder="" v-model="department.dep_id"></el-input>
				    		</el-form-item>
				    	</el-col>
				    	<el-col :span="7">
				    		<el-form-item label="部门名称:">
				    			<el-input placeholder="" v-model="department.dep_name"></el-input>
				    		</el-form-item>
				    	</el-col>
				    </el-row>
					<el-row :gutter="40">
						<el-col :span="7">
							<el-form-item label="部门经理:">
								<el-input placeholder="" v-model="department.dep_manager"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="部门电话:">
								<el-input placeholder="" v-model="department.dep_phone"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="40">
						<el-col :span="7">
							<el-form-item label="部门描述:">
								<el-input placeholder="" v-model="department.dep_description"></el-input>
							</el-form-item>	
						</el-col>
						<el-col :span="7">	
							<el-form-item label="建立日期:">
								<el-date-picker type="date" v-model="department.dep_date"
									value-format="YYYY-MM-DD"></el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
							<el-form-item>
								<el-button type="primary" @click="search()">搜索</el-button>
							</el-form-item>
			</el-form>
		</div>
		<div id="search_result">
			<el-table
				:data="departments"
				:border="true"
				:stripe="true">
				<el-table-column label="部门编号" prop="dep_id"      width="100"></el-table-column>
				<el-table-column label="部门名称" prop="dep_name"    width="130"></el-table-column>
				<el-table-column label="部门经理" prop="dep_manager" width="120"></el-table-column>
				<el-table-column label="部门电话" prop="dep_phone"   width="150"></el-table-column>
				<el-table-column label="部门描述" prop="dep_description"></el-table-column>
				<el-table-column label="建立日期" prop="dep_date"    width="120"></el-table-column>
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default{
		name:"DepartmentSearchView",
		data(){
			return{
				department:{
					dep_id:'',
					dep_name:'',
					dep_manager:'',
					dep_phone:'',
					dep_description:'',
					dep_date:'',		
				},
				departments:[],
				deldepartments: [],
				del_list: []
			}
		},
		methods:{
			search(){
				this.$axios.post("http://localhost:8088/eStaff/department/findByParam",this.department)
				.then(rst=>{
					console.log(rst.data)
					this.departments=rst.data.result;
				}).catch(err=>{
					console.log(err)
				})
			},
			handleEdit(index, row) {
				this.$message('编辑第' + (index + 1) + '行');
				let str = JSON.stringify(this.departments[index]);
				sessionStorage.setItem("department", str);
				this.$router.push("/departmentUpdate");
			},
			handleDelete(index, row) {
				this.$message.error('删除第' + (index + 1) + '行');
				this.del_list = this.del_list.concat(this.departments[index]);
				console.log(this.del_list);
				this.$axios.post("http://localhost:8088/eStaff/department/delDepartment", this.del_list)
					.then(rst => {
						if (rst.data.code == 200) {
							// this.$message("操作结束");
							this.$alert( "部门删除成功" , rst.data.msg);
							this.$message.error('删除了' + str);
						} else {
							this.$alert(rst.data.msg, "失败");
						}
						console.log(rst.data);
					}).catch(err => {
						console.log(err);
					})
			
				this.del_list = [];
			
				// 刷新搜索框
				this.search()
			}
		}
		
	}
</script>

<style scoped>
#container{
		text-align: left;
		padding-top: 20px;
	}

#search_result{
		text-align: left;
		padding-left: 40px;
		padding-right: 70px;
		padding-bottom: 40px;
}
</style>
